:root {
  /* Primary - Nebula Blue */
  --color-primary: 59 130 246; /* #3B82F6 */
  --color-primary-hover: 96 165 250; /* #60A5FA */
  --color-primary-active: 37 99 235; /* #2563EB */

  /* Accent - Aurora Purple */
  --color-accent: 139 92 246; /* #8B5CF6 */

  /* Background - Deep Space (Default Light Mode Mapping for contrast) */
  /* In light mode, we keep it clean but technical */
  --color-bg-deep: 248 250 252; /* Slate-50 */
  --color-bg-surface: 255 255 255; /* White */
  --color-text-main: 15 23 42; /* Slate-900 */
  --color-text-sub: 100 116 139; /* Slate-500 */

  /* Borders */
  --color-border: 226 232 240; /* Slate-200 */
}

/* Dark Mode - The Real Starship Experience */
html.dark {
  /* Background - Deep Space */
  /* 确保这里是深空蓝，而不是纯黑 */
  --color-bg-deep: 15 23 42; /* Slate-900 #0F172A */
  --color-bg-surface: 30 41 59; /* Slate-800 #1E293B */

  /* Text */
  --color-text-main: 241 245 249; /* Slate-100 */
  --color-text-sub: 148 163 184; /* Slate-400 */

  /* Borders */
  --color-border: 51 65 85; /* Slate-700 */
}

/* Utility Classes for Glassmorphism */
.glass-panel {
  @apply bg-white/70 dark:bg-slate-800/70 backdrop-blur-md border border-white/20 dark:border-white/10 shadow-sm;
}

.glow-text {
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

body {
  @apply bg-[rgb(var(--color-bg-deep))] text-[rgb(var(--color-text-main))] transition-colors duration-300;
}
